<template>
  <transition name="list">
  <div class="recommend_fm">
    <header>
      精选FM
      <span class="iconfont icon-close-icon" @click="closeList"></span>
    </header>
    <div class="module">

      <div class="scroll" ref="wrapper" :data="fmList">
        <div>
          <ul class="recommend_ul">
            <li :class="{'select':v.song_id == song_id}" @click="select(v.song_id)" v-for="v in fmList"
                :key="v.song_id">
              <span class="iconfont icon-music-play" v-if="v.song_id != song_id"></span>
              <span  class="iconfont" v-if="v.song_id == song_id"><img src="./gif.gif" alt=""></span>
              <div class="fm_content">
                <div class="title">{{v.title}}</div>
                <span>来源：{{v.author}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="more" @click="more">
      <span class="iconfont icon-Collection-music"></span>
      <span class="look_more">收听更多FM</span>
      <span class="iconfont icon-getmore-icon"></span>
    </div>
  </div>
  </transition>
</template>


<script>
  import Bscroll from 'better-scroll'

  export default {
    name: 'list',
    watch:{
      refresh(){
        if(this.refresh){
          this.scroll.refresh()
        }
      }
    },
    props: {
      fmList: Array,
      song_id: Number,
      refresh:Boolean
    },
    mounted() {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        data: this.fmList,
        click:true,
        scrollbar: {
          fade: true,
          interactive: true // 1.8.0 新增
        }
      })
    },
    methods: {
      closeList() {
        this.$emit('close')
      },
      more() {
        this.closeList()
        this.$router.push({path: "/psyFm"})
      },
      select(song_id) {
        this.$emit('selectFm',song_id)
      }
    }
  }
</script>

<style scoped>

  .recommend_fm {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    z-index: 40;
    padding-top: 360px;
  }

  .module {
    overflow: hidden;
    position: relative;
    height:650px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 40;
    margin-bottom: 0;
  }

  .scroll {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  header {
    text-align: center;
    height: 96px;
    background-color: #f5f4f7;
    padding: 32px 26px;
    font-size: 36px;
    font-weight: bold;
    line-height: 1;
    position: relative;
  }

  .more {
    height: 96px;
    background-color: #f5f4f7;
    line-height: 96px;
    width: 100%;
    padding: 0 26px;
    font-size: 28px;
  }

  .icon-close-icon {
    position: absolute;
    right: 26px;
    top: 30px;
    font-size: 30px;
    color: #999;
  }

  /* for Chrome */

  ul {
    padding: 0 26px;
    background-color: white;
  }

  li .iconfont {
    float: left;
    font-size: 58px;
    margin-right: 26px;
    margin-top: 8px;
  }


  .iconfont img{
    width: 56px;
    height: 56px;

  }

  li .icon-music-play {
    color: #c5c5c7;
    font-size: 54px;

  }

  li {
    border-bottom: solid 1px #ececec;
    height: 112px;
    padding: 16px 0;
  }

  li:last-of-type {
    border-bottom: none;
  }

  .fm_content {
    width: auto;
  }

  .fm_content .title {
    font-size: 28px;
    color: #333;
  }

  .select .title {
    color: #ff6d00;
  }

  .fm_content span {
    font-size: 20px;
    color: #999;
  }

  .icon-Collection-music {
    font-size: 54px;
    color: black;
    margin-top: 2px;
    margin-right: 20px;
    float: left;
  }

  .recommend_fm .look_more {
    color: black;
    font-size: 28px;
  }
  .icon-getmore-icon {
    font-size: 32px;
    color: #999;
    float: right;
  }

  .list-enter-active, .list-leave-active {
    transition: all 0.3s;
    z-index: 30;
  }

  .list-enter, .list-leave-to {
    transform: translate3d(0,100%, 0);
    z-index: 30;
  }
</style>
